<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姜启航">
    <title>百度新闻搜索</title>
    <style>
    *{
        box-sizing: border-box;
    }
    body{
        margin: 0;
    }
    nav{
        height: 35px;
        width: 100%;
        border-bottom: 1px solid #eee;
      
    }
    .nav{
        margin: 0;
        padding: 0;
        list-style: none;
         /* float: right;  */
         display: flex;
         justify-content: flex-end;
         font-size: 14px;
         
    }
    .nav li{
        /* float: left; */
        line-height: 15px;
         margin: 10px; 
    }
    .nav li a{
        color: #000;
        font-weight: bold;
    }
    .nav li .xinwen{
        color: #998;
        text-decoration: none;
    }
    .nav div{
        display: flex;
         justify-content: flex-end;
         margin-left: 25px;
    }
    .nav div li a{
        color: #999;
        font-weight: 100;
    }
    .nav div::before{
       content: '|';
       margin-top: 7px;
       color: #ddd;
    }
    .container{
        width:1000px;
        margin: 0 auto;
        /* vertical-align: bottom; */
        
        
    }
    .container img{
        width: 150px;
        height: 45px;
        margin-right: 5px;
         margin-bottom: -5px; 
    }
    .container input{
        height: 45px;
        width: 470px;
        
    }
    .container button{
        height: 45px;
        width: 100px;
        background-color: #3388FF;
        margin-left: -5px;
        border: 0;
        color: white;
    }
    .container a{
        margin: 5px;
    }
    .container .input{
        width: 10px;  
        height: 11px;
        /* margin-left: 50px; */
    }
    .container p{
        margin-left: 150px;
        font-size: 12px;
    }
    .menu ul li a{
        display: inline-block;
         /* width: 50px;  */
        margin: 0;
        color: white;
        text-decoration: none;
        line-height: 40px;
        font-size: 14px;
    }
    .menu ul{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .menu ul li{
        float: left;
        padding: 0;
          width: 60px;  
        text-align: center;
    }
     main .container{
        width: 1200px;
    } 
    .menu{
        height: 30px;
        width: 1200px;
    }
    main{
        width: 100%;
        height: 40px;
        background-color: #01204F;
    }
  
    .block{
        background-color: #cc0000;
    }
    .back-top{
        width:80px;
        height: 20px;
        background-color: red;
        text-align: center;
        line-height: 20px;
        position: fixed; 
        bottom: -30px;
        right: 30px; 
        transition: all 0.5s linear;
    }
  section{
      width: 100%;  
      height: 1500px;
  }
    </style>
</head>
<body>
<nav>
    <ul class="nav">
        <li><a href="">网页</a></li>
        <li><a class="xinwen" href="">新闻</a></li>
        <li><a href="">贴吧</a></li>
        <li><a href="">知道</a></li>
        <li><a href="">音乐</a></li>
        <li><a href="">图片</a></li>
        <li><a href="">视频</a></li>
        <li><a href="">地图</a></li>
        <li><a href="">文库</a></li>  
       <div>
        <li><a href="">百度首页</a></li>
        <li><a href="">登录</a></li>
        <li><a href="">注册</a></li>
        <li><a href="">百度新闻客户端</a></li>
    
       </div>
        
    </ul>
   
</nav>
<header>
    <div class="container">
        <span><img src="./logo.png" alt=""></span>
        <input type="text" name="" value="">
        <button type="button">百度一下</button>
        <a href="">帮助</a>
        <a href="">高级搜索</a>
        <a href="">设置</a>
        <p><input class="input" checked type="radio" name="abc">新闻全文&#x3000;<input class="input" type="radio" name="abc">新闻标题</p>
    </div>
    
</header>
<main>
    <div class='container'>
        <div class="menu">
            <ul>
                <li class="block"><a href="">首页</a></li>
                <li><a href="">百家号</a></li>
                <li><a href="">国内</a></li>
                <li><a href="">国际</a></li>
                <li><a href="">军事</a></li>
                <li><a href="">社会</a></li>
                <li><a href="">财经</a></li>
                <li><a href="">娱乐</a></li>
                <li><a href="">体育</a></li>
                <li><a href="">互联网</a></li>
                <li><a href="">科技</a></li>
                <li><a href="">游戏</a></li>
                <li><a href="">时尚</a></li>
                <li><a href="">女人</a></li>
                <li><a href="">汽车</a></li>
                <li><a href="">个性推荐</a></li>
                <li><a href="">更多</a></li>
            </ul>
        </div>
    </div>
</main>
<section>
    
</section>
<div class="back-top">返回顶部</div>
</body>
</html>

<script>
    
    var main=document.querySelector('main');
    var menu=document.querySelector('main .menu');
    window.onscroll=function(){
         var scrollTop=document.scrollingElement.scrollTop;
        // console.log(sec.screenTop);
        if(scrollTop>163){
            main.style.position='fixed';
            main.style.top='0';
        }
        else{
             main.style='none';
        }
        if (scrollTop>300) {
            backtop.style.bottom='30px';
        } else {
            backtop.style.bottom='-30px';
        }
    }
    var backtop = document.querySelector('.back-top');
        backtop.onclick = function () {
           document.documentElement.scrollTop= document.body.scrollTop=0;
        }
    
 

   
</script>